<template>
	<view class="container">
		<view class="example-body">
			<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger" @fabClick="fabClick" />
			<uni-section overflow title="开奖信息" type="line" v-if=" arrays[0]">
				<uni-card :title="value.qishu" :extra="value.date" v-for="(value,index) in arrays" @click="qureYiBai">
					<uni-badge class="uni-badge-left-margin" :text="value.baiWei" type="primary" />
					<uni-badge class="uni-badge-left-margin" :text="value.shiWei" type="primary" />
					<uni-badge class="uni-badge-left-margin" :text="value.geWei" type="primary" />
				</uni-card>
				<navigator url="echarsSanB/sanDQuerVo?title=navigate" hover-class="navigator-hover">
					<u--text text="查看更多" openType="share" type="success" align="center"></u--text>
				</navigator>
			</uni-section>
			
			
			<uni-section overflow :title="titlezzt" type="line">
				<u--text :text="ZhuangTuQie" openType="share" type="success" align="center" @click="zhuZhuangTuQie">
				</u--text>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
				</view>
			</uni-section>


		</view>

	</view>

</template>

<script>
	export default {
		components: {},
		data() {
			return {
				days: "",
				ZhuangTuQie: "",
				ZhuangTuQuerQiShu: "30",
				TuQie: true,
				sDate1: "",
				sDate2: "",
				sDate2S: "",
				titlezzt: "30期次数统计及预出概率",
				arrays: [],
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
				content: [{
						iconPath: '/static/img/tabbar/homeactive.png',
						selectedIconPath: '/static/img/tabbar/homeactive.png',
						text: '图表11',
						active: false
					},
					{
						iconPath: '/static/img/tabbar/homeactive.png',
						selectedIconPath: '/static/img/tabbar/homeactive.png',
						text: '图表25',
						active: false
					},
					{
						iconPath: '/static/img/tabbar/guanzhuactive.png',
						selectedIconPath: '/static/img/tabbar/guanzhuactive.png',
						text: '分析',
						active: false
					},

				],
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableMarkLine: true,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
								position: 'left',
								min: 0
							}
							/* ,//第二个Y轴
							
						{
															position: 'right',
															min: 0
														} */
						]
					},
					extra: {
						column: {
							type: "group",
							width: 7,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							seriesGap: 5,
							barBorderRadius: [
								6,
								6,
								6,
								6
							]
						},
						markLine: {

						}
					}
				}
			};
		},
		methods: {
			qureYiBai() {
				uni.navigateTo({
					url: 'echarsSanB/sanDQuerVo?title=navigate'
				});
			},
			trigger(e) {
				//console.log(e.index)
				this.content[e.index].active = !e.item.active
				if (e.index == 2) {
					uni.navigateTo({
						url: 'echarsSanB/sanDZongFenXi?title=navigate'
					});
				}
				if (e.index == 1) {
					uni.navigateTo({
						url: 'echarsSanB/echarsSanBRE?title=navigate'
					});
				}
				if (e.index == 0) {
					uni.navigateTo({
						url: 'echarsSanB/echarsSanB?title=navigate'
					});
				}


			},
			fabClick() {

			},
			async getSanDVo() {
				uni.showLoading({
					title: '加载中'
				});
				//发起post方式的请求
				uni.request({
					//url:  'http://114.132.55.180:443/sand/chart/selectSanD/coldHot', 
					url: 'http://114.132.55.180:443/sand/chart/selectSanDVO',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						qishu: "1"
					},
					method: 'POST',

					success: (res) => {
						uni.hideLoading(); //动画关闭
						this.arrays = res.data
						if (res.data.success) {

						} else {}

					},
					fail: (res) => {

					}
				});
			},
			zhuZhuangTuQie() {
				if (this.TuQie) {
					this.sDate1 = "2022/01/01"
					this.sDate2 = (new Date().toISOString().substring(0, 4) + "/" +
						new Date().toISOString().substring(5, 7) + "/" + new Date().toISOString().substring(8, 10))
					//算相隔天数
					var aDate, oDate1, oDate2, iDays;
					aDate = this.sDate1.split("/");
					oDate1 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0]); //转换为yyyy-MM-dd格式
					aDate = this.sDate2.split("/");
					oDate2 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0]);
					iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
					iDays + 1; //返回相差天数
					this.titlezzt = iDays + 1 + "期次数统计及预出概率",
						this.ZhuangTuQuerQiShu = iDays + 1
					this.getServerData();
					this.ZhuangTuQie = "切换为30期"
					this.TuQie = false
				} else {
					this.titlezzt = "30期次数统计及预出概率",
						this.ZhuangTuQuerQiShu = "30"
					this.getServerData();
					this.ZhuangTuQie = "切换为" + this.days + "期"
					this.TuQie = true
				}


			},
			getServerData() {
				uni.request({
					//url:  'http://114.132.55.180:443/sand/chart/selectSanD/coldHot', 
					url: 'http://114.132.55.180:443/sand/chart/selectSanDVO/zhuZhunagTu',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						qishu: this.ZhuangTuQuerQiShu
					},
					method: 'POST',

					success: (res) => {
						let resd = {
							categories: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
							series: [{
									"index": 0,
									name: "出号次数",
									data: res.data.sanDCiShu
								}
								/* ,
																			   {
																				"index": 1,
																			    name: "预出概率",
																			    data: [18,27,21,24,6,28,21,24,6,28]
																			            } */
							]
						};
						this.chartData = JSON.parse(JSON.stringify(resd));

					},
					fail: (res) => {

					}
				});

			},

			getSjTs() {
				this.sDate1 = "2022/01/01"
				this.sDate2 = (new Date().toISOString().substring(0, 4) + "/" +
					new Date().toISOString().substring(5, 7) + "/" + new Date().toISOString().substring(8, 10))
				//算相隔天数
				var aDate, oDate1, oDate2, iDays;
				aDate = this.sDate1.split("/");
				oDate1 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0]); //转换为yyyy-MM-dd格式
				aDate = this.sDate2.split("/");
				oDate2 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0]);
				iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
				iDays + 1; //返回相差天数
				var adada = iDays + 1
				this.days = iDays + 1
				this.ZhuangTuQuerQiShu = iDays + 1
				this.ZhuangTuQie = "切换为" + adada + "期"
			}

		},
		mounted() {
			this.getSanDVo();
			this.getServerData();
			this.getSjTs();

		},
	};
</script>

<style lang="scss">
	/* #ifdef MP-ALIPAY */
	.uni-badge {
		margin-left: 100rpx;
	}

	/* #endif */
	.example-body {
		flex-direction: row;
		justify-content: flex-start;
	}

	.uni-badge-left-margin {
		margin-left: 5px;

	}
</style>
